<template>
	<view>
		<view class="header">
			<text>关注</text>
		</view>
		<view class="container">
			<view class="container-header" style="width: 100%;">
				<u-tabs :list="navList" :scrollable="false" @click="navClick"></u-tabs>
			</view>
			<view class="container-center">
				<view style="width: 100%;" v-if="NavIndex === 1">
					<view style="width: 94.5%;height: 600rpx;padding: 20rpx;margin-top: 10rpx;"
						v-for="(room,index) in SelectedRooms" :key="index">
						<view class="container-swagger" @tap="particulars">
							<u-swiper :height="200" :list="room.imgList"></u-swiper>
						</view>
						<view style="width: 100%;padding: 20rpx;line-height: 45rpx;" @tap="particulars">
							<view>{{room.roomTitle}}</view>
							<view>
								<u--text prefixIcon="map" :size='13' iconStyle="font-size: 29rpx"
									:text="room.roomAddress"></u--text>
							</view>
							<view style="width: 100%;display: flex;">
								<view style="margin: 5rpx;" v-for="(item,TableIndex) in room.roomLabel"
									:key="TableIndex">
									<u-tag size='mini' :text="item" plain> </u-tag>
								</view>
							</view>
							<view style="display: flex;height: 50rpx;line-height: 50rpx;">
								<view style="width: 30%; color: #ee4242;">
									￥{{room.roomMoney}}/月
								</view>
								<view style="width: 66%;height: 50rpx; text-align: right;">
									<image style="width: 30rpx;vertical-align: -5rpx;margin-right: 5rpx;"
										src="../../static/日期.png" mode="widthFix"></image>
									<text style="font-size: 27rpx;color: #9e9e9e;">可入住日期{{room.roomDataTime}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;" v-if="NavIndex === 2">
					<view style="width: 89%;padding: 27rpx 40rpx;" v-for="(room,index) in PostsList" :key="index">
						<view style="width: 100%; height: 100rpx; line-height: 100rpx; display: flex;">
							<view style="width: 18%;" class="container-IMAGE">
								<image style="width: 100rpx;height: 100rpx; border-radius: 50%;" :src="room.imgSrc">
								</image>
							</view>
							<view style="width: 57%;">
								{{ room.userName }}
							</view>
							<view style="width: 25%;font-size: 26rpx;color: #929292;text-align: right;">
								{{room.roomCreateDate}}
							</view>
						</view>

						<view style="width: 100%;line-height:60rpx;">
							<view>{{room.roomTitle}}</view>
							<view style="width: 100%;display: flex;">
								<view style="margin: 5rpx;" v-for="(item,TableIndex) in room.roomLabel"
									:key="TableIndex">
									<u-tag size='mini' :text="item" plain> </u-tag>
								</view>
							</view>
							<view>
								<u--text prefixIcon="map" :size='13' iconStyle="font-size: 29rpx"
									:text="room.roomAddress"></u--text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="NavIndex === 3">
					<view style="width: 100%;height: 100vh;">
						<view style="margin-top: 80rpx;">
							<u-empty mode="favor" :iconSize='150' text="暂无用户收藏你的房子">
							</u-empty>
						</view>
					</view>
				</view>
				<view v-if="NavIndex === 4">
					<view style="width: 93%;height: 100rpx;display: flex;padding: 25rpx;" v-for="(item,index) in visitUser" :key="index">
						<view style="width: 17%; height: 100%;">
							<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" :src="item.imgSrc"></image>
						</view>
						<view style="width: 83%;height: 100%;line-height: 55rpx;">
							<view>
								<text style="font-size: 35rpx; font-weight: bold;">{{ item.userName }}</text> 
							</view>
							<view>
								<text style="font-size: 26.5rpx;color: #b9b9b9;">{{ item.visitData }}访问过我</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visitUser: [{
						imgSrc: "https://c-ssl.duitang.com/uploads/blog/202303/14/20230314113525_484ed.jpg",
						userName: '小妹妹',
						visitData: '3小时前'
					},
					{
						imgSrc: "https://tse1-mm.cn.bing.net/th/id/OIP-C.aED4ZuwVrhH7pSb5Jz0xMgHaJ3?rs=1&pid=ImgDetMain",
						userName: '小妹妹',
						visitData: '1小时前'
					}
				],
				PostsList: [{
						imgSrc: "https://tse1-mm.cn.bing.net/th/id/OIP-C.aED4ZuwVrhH7pSb5Jz0xMgHaJ3?rs=1&pid=ImgDetMain",
						userName: '小妹妹',
						roomCreateDate: '一天内发布',
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
					},
					{
						imgSrc: "https://c-ssl.duitang.com/uploads/blog/202303/14/20230314113525_484ed.jpg",
						userName: '小姐姐',
						roomCreateDate: '一天内发布',
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁']
					}
				],
				SelectedRooms: [{
						imgList: [
							'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg',
							'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
							'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335',

						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [
							'https://img2.baidu.com/it/u=1795613048,2862580360&fm=253&fmt=auto&app=138&f=JPEG',

							'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1002%2F9aa2a30bj00r0bx8r001mc000hs00hsm.jpg&thumbnail=660x2147483647&quality=80&type=jpg',

							'https://img2.baidu.com/it/u=640370081,883809769&fm=253&fmt=auto&app=138&f=JPEG',
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					}
				],
				navList: [{
					name: '收藏房源',
					id: 1
				}, {
					name: '关注帖子',
					id: 2
				}, {
					name: '收藏我的',
					id: 3
				}, {  
					name: '谁看过我',
					id: 4
				}],
				NavIndex: 1
			};
		},
		methods: {
			navClick(item) {
				this.NavIndex = item.id
			},
			particulars(){
				uni.navigateTo({
					url: '/seedComponents/HouseInformation/HouseInformation'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 100rpx;
		margin: 50rpx 0 10rpx 0;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 40rpx;
	}

	.container {
		.container-center {
			.container-swagger {
				width: 100%;
				height: 400rpx;


				.u-swiper {
					height: 400rpx !important;

					image {
						height: 400rpx;
					}
				}
			}
		}
	}
</style>